<style type="text/css">
    .el-transfer-panel__body .el-transfer-panel__list{
        position: absolute;
        left: 16px;
    }
</style>
<template id="v_id_{{ name }}">
<span>
    <input v-for="id in value" name="{{ raw_name }}" type="hidden" :value="id">
     <el-transfer
             v-loading="loading"
             v-model="value"
             {{ attrs|safe }}
             {% if action %}
             :filterMethod="filterMethod"
             {% endif %}
             :props="{
              key: 'id',
              label: 'text'
            }"
             :data="options">

     </el-transfer>

</span>
</template>

<script type="text/javascript">
    var SelectBox = {
        add_to_cache: function (toId, o) {
            console.log(arguments)
            var target = `${toId}`
            var r = window[target]
            if (r) {
                r.options.push({id: o.value, text: o.label})
                r.$nextTick(function () {
                    if (r.value instanceof Array) {
                        r.value.push(o.value);
                    } else {
                        r.value = o.value;
                    }
                });
            }

        },
        redisplay(toId) {
        }
    }
    var app_{{ name }} = new Vue({
        el: '#v_id_{{ name }}',
        data: {
            value: {{ value|safe }},
            options:{{ options|safe }},
            action:'{{ action }}',
            loading:false
        },
        methods:{
            filterMethod(query, item){
            }
        }
    });
    var id_{{ name }}_to = app_{{ name }};
    var id_{{ name }} = app_{{ name }};
</script>